<template>
  <el-row :gutter="24" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <el-card class="box-card">
        <div class="chart-card-header">
          <div class="meta">
            <div class="chart-card-title">客户总数</div>
          </div>
          <div class="total">
            <span>{{ stat.customer.total }}</span>
          </div>
        </div>
        <div class="chart-card-content">
          <div class="content-fix">
            <div class="chart-trend">
              <span>
                <span>月同比</span>
                <span class="item-text">{{ stat.customer.rate }}%</span>
              </span>
              <span :class="stat.customer.incre == true ? 'up': 'down'">
                <i class="icon icon-caret-up">
                  <svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
                    <path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"/>
                  </svg>
                </i>
              </span>
            </div>
          </div>
        </div>
        <div class="chart-card-footer">
          <div class="field">
            本月新增学员
            <span>{{ stat.customer.cur }}</span>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <el-card class="box-card">
        <div class="chart-card-header">
          <div class="meta">
            <div class="chart-card-title">学员总数</div>
          </div>
          <div class="total">
            <span>{{ stat.student.total }}</span>
          </div>
        </div>
        <div class="chart-card-content">
          <div class="content-fix">
            <div class="chart-trend">
              <span>
                <span>月同比</span>
                <span class="item-text">{{ stat.student.rate }}%</span>
              </span>
              <span :class="stat.student.incre == true ? 'up': 'down'">
                <i class="icon icon-caret-up">
                  <svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
                    <path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"/>
                  </svg>
                </i>
              </span>
            </div>
          </div>
        </div>
        <div class="chart-card-footer">
          <div class="field">
            本月新增学员
            <span>{{ stat.student.cur }}</span>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <el-card class="box-card">
        <div class="chart-card-header">
          <div class="meta">
            <div class="chart-card-title">班级总数</div>
          </div>
          <div class="total">
            <span>{{ stat.cls.total }}</span>
          </div>
        </div>
        <div class="chart-card-content">
          <div class="content-fix">
            <div class="chart-trend">
              <span>
                <span>月同比</span>
                <span class="item-text">{{ stat.cls.rate }}%</span>
              </span>
              <span :class="stat.cls.incre == true ? 'up': 'down'">
                <i class="icon icon-caret-up">
                  <svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
                    <path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"/>
                  </svg>
                </i>
              </span>
            </div>
          </div>
        </div>
        <div class="chart-card-footer">
          <div class="field">
            本月新开班级
            <span>{{ stat.cls.cur }}</span>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <el-card class="box-card">
        <div class="chart-card-header">
          <div class="meta">
            <div class="chart-card-title">课时总数</div>
          </div>
          <div class="total">
            <span>{{ stat.schedule.total }}</span>
          </div>
        </div>
        <div class="chart-card-content">
          <div class="content-fix">
            <div class="chart-trend">
              <span>
                <span>月同比</span>
                <span class="item-text">{{ stat.schedule.rate }}%</span>
              </span>
              <span :class="stat.schedule.incre == true ? 'up': 'down'">
                <i class="icon icon-caret-up">
                  <svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
                    <path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"/>
                  </svg>
                </i>
              </span>
            </div>
          </div>
        </div>
        <div class="chart-card-footer">
          <div class="field">
            本月新增课时
            <span>{{ stat.schedule.cur }}</span>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { getStatData } from '@/api/statistics'
import CountTo from 'vue-count-to'
export default {
  components: {
    CountTo
  },
  data() {
    return {
      stat: {
        'customer': {
          'total': 0,
          'cur': 0,
          'incre': true,
          'rate': '0'
        },
        'student': {
          'total': 0,
          'cur': 0,
          'incre': true,
          'rate': '0'
        },
        'schedule': {
          'total': 0,
          'cur': 0,
          'incre': true,
          'rate': '0'
        },
        'cls': {
          'total': 0,
          'cur': 0,
          'incre': true,
          'rate': '0'
        }
      }
    }
  },
  mounted() {
    getStatData().then(res => {
      this.stat = res.data
    })
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
